<template>
  <div class="ma-content-block lg:flex justify-between">
    <sa-table ref="crudRef" :options="options" :columns="columns" :searchForm="searchForm" @resetSearch="resetSearch">
      <template #tableSearch>
        <a-col :span="6">
          <a-form-item field="id" label="售后ID">
            <a-input v-model="searchForm.id" placeholder="请输入" :allow-clear="true" @keydown.enter="refresh"></a-input>
          </a-form-item>
        </a-col>
        <a-col :span="6">
          <a-form-item field="order" label="订单信息">
            <a-input v-model="searchForm.order" placeholder="订单ID|订单号" :allow-clear="true"
              @keydown.enter="refresh"></a-input>
          </a-form-item>
        </a-col>
        <a-col :span="6">
          <a-form-item field="user" label="会员账号">
            <a-input v-model="searchForm.user" placeholder="会员账号" :allow-clear="true"
              @keydown.enter="refresh"></a-input>
          </a-form-item>
        </a-col>
        <a-col :span="6">
          <a-form-item field="uid" label="会员UID">
            <a-input v-model="searchForm.uid" placeholder="会员UID" :allow-clear="true"
              @keydown.enter="refresh"></a-input>
          </a-form-item>
        </a-col>
        <a-col :span="6">
          <a-form-item field="state" label="状态">
            <sa-select :fieldNames="{value:'value',label:'title'}" v-model="searchForm.state" :data="paramsData.state"
              placeholder="请选择" @change="refresh"></sa-select>
          </a-form-item>
        </a-col>
        <a-col :span="6">
          <a-form-item field="create_time" label="时间">
            <a-range-picker v-model="searchForm.create_time" format="YYYY-MM-DD" :allow-clear="true"
              @change="refresh"></a-range-picker>
          </a-form-item>
        </a-col>
      </template>
      <template #id="{record}">
        <div>售后ID:{{record.id}}</div>
        <div>状态:{{record.total_state_text}}{{ record.check_msg }}</div>
      </template>
      <template #order="{record}">
        <div>订单ID:{{record.order_id}}</div>
        <div>售后地区:{{record.area_text}}</div>
      </template>
      <template #user="{record}">
        <div>UID:{{record.user_id}}</div>
        <div>会员名:{{record.user_name}}</div>
      </template>
      <template #time="{record}">
        <div>售后类型:{{record.type_text}}</div>
        <div>时间:{{record.create_time}}</div>
      </template>
      <template #sku="{record}">
        <div v-for="(itm,idx) in record.sku_list" :key="idx">
          <div>{{ itm.sku_name }}({{ itm.num }})</div>
        </div>
      </template>
      <template #goods="{record}">
        <div v-for="(itm,idx) in record.sku_list" :key="idx">
          <div>{{ itm.goods_name }}({{ itm.num }})</div>
        </div>
      </template>
      <template #refund="{record}">
        <div>状态:{{record.caiwu_state_text}}</div>
        <div>应退款:{{'$'+record.ying_tui_num}} {{ '¥' + record.ying_tui_num_cny }}</div>
        <div>已退款:{{'$'+record.tuikuan_num}} {{ '¥' + record.tuikuan_num_cny }}</div>
        <div>兑换品运费:{{'$'+record.freight_num}} {{ '¥' + record.freight_num_cny }}</div>
      </template>
      <template #attach="{record}">
        <div v-if="record.img_arr?.length>0">
          <a-button size="mini" type="outline" @click="detail(record)">查看</a-button>
        </div>
        <div v-else>无</div>
      </template>
      <template #operationAfterExtend="{record}">
        <div class="custom_cell">
          <a-button type="primary" size="mini" shape="round"    @click="detail(record)">详情</a-button>
        <div v-if="record.caiwu_state==0">
            <a-button type="primary" size="mini" shape="round" class="green_color" @click="refund(record, 1)">
               {{ '同意退款' }}
            </a-button>
          <a-popconfirm content="确定不同意该售后退款吗?" position="bottom"
            @ok="refund(record, 2)">
            <a-button type="primary" size="mini" shape="round" class="red_color">
               {{ '拒绝退款' }}
            </a-button>
          </a-popconfirm>
        </div>
        <div v-else>
          <a-popconfirm  content="确定重新审核吗?确定將回退上一步" position="bottom"
            @ok="reset(record)">
            <a-button type="primary" size="mini" shape="round" class="yellow_color">
              {{ '重新审核' }}
            </a-button>
          </a-popconfirm>
        </div>
        </div>
      
      </template>
    </sa-table>
    <!-- 编辑表单 -->
    <edit-form ref="editRef" @success="refresh" />
    <sign-for ref="signRef" @success="refresh" />
    <agreeRefund ref="agreeRef" @success="refresh"></agreeRefund>
    <sa-modal :loading="checkInfo.loading" v-model:visible="checkInfo.visible" :title="checkInfo.title" @ok="checkOK" @cancel="checkInfo.visible=false">
      <template #self>
        <a-form-item label="" required>
          <a-textarea v-model="checkData.fail_msg" placeholder="请输入拒绝原因"></a-textarea>
        </a-form-item>
        
      </template>
    </sa-modal>
  </div>
</template>
  
  <script setup>
  import { onMounted, ref, reactive, computed,watch } from 'vue'
  import AsApi from '@/api/system/afterSale'
  import SaTable from '@cps/sa-table/index.vue'
  import SaSelect from '@cps/sa-select/index.vue'
  import SaModal from '@cps/sa-modal/index.vue'
  import agreeRefund from './agreeRefund.vue'
  import { Message } from '@arco-design/web-vue'
  import { throttle } from 'lodash';
  import tool from '@/utils/tool'
  import EditForm from './detail.vue'
  import signFor from './signFor.vue'
  const crudRef = ref()
  const editRef = ref()
  const signRef=ref()
  const checkInfo=reactive({
    visible:false,
    title:'',
    loading:false
  })
  const searchForm = ref({
    order:'',
    user:'',
    state:99,
    id:'',
    uid: '',
    create_time:[],
  })  
  const checkData=ref({
    state:'',
    id:'',
    fail_msg:''
  })
  const options = reactive({
    api: AsApi.refund_list,//表格数据接口
    operationColumnWidth: 180,//操作欄
    showSearch:true,
    columnAlign: 'left',
    pageSimple: false,//是否展示操作欄有 以及工具欄
    isTreeTable:false,
    showLine:false,
    add: {//頂部新增按鈕
      show: false,
      auth: ['/core/menu/save'],
      func: async () => {
        editRef.value?.open()
      },
    },
    edit: {//操作欄编辑按鈕
      show: false,
      auth: ['/core/menu/update'],
      func: async (record) => {
        editRef.value?.open('edit',record)
        editRef.value?.setFormData(record)
      },
    },
    isExpand: false,//展開所有子樹
  })
  
  const columns = reactive([
    { title: 'ID|状态', dataIndex: 'id', width: 200 },
    { title: '订单号', dataIndex: 'order', width: 180 },
    { title: '订单会员', dataIndex: 'user', width: 180 },
    { title: '退款状态', dataIndex: 'refund', width: 220 },
    { title: '类型｜时间', dataIndex: 'time', width: 200 },
    { title: 'SKU', dataIndex: 'sku', width: 230 },
    { title: '商品', dataIndex: 'goods', width: 230 },
    { title: '问题描述', dataIndex: 'describe', width: 180 },
    { title: '附件', dataIndex: 'attach', width: 120 },
  ])
  
  const initPage = async () => { 

  }
  const detail=async(record)=>{
    editRef.value?.open(record)
    editRef.value?.getData(record.id)
  }
  const paramsData=ref({})
  const getParams=async()=>{
    const {data}=await AsApi.refund_list_params()
    paramsData.value={...data}
    paramsData.value.state=tool.simpleTransformArray(data.caiwu_state)
    paramsData.value.state.unshift({value:99,title:'全部'})
  }
  const refresh = async () => {
    crudRef.value?.refresh()
  }
  const agreeRef=ref()
  const refund=async(data,state)=>{
    checkData.value.id=data.id
    checkData.value.state=state
    if(state==2){
      checkInfo.title='请输入拒绝原因'
      checkInfo.visible=true
      checkData.value.fail_msg=''
    } else {
      agreeRef.value?.open(data)
      // try{
      //   let dats={...checkData.value}
      //   const {data}=await AsApi.refuse_refund(dats)
      //   checkInfo.visible=false
      //   Message.success('操作成功')
      //   refresh()
      // }catch{

      // }   
    }   
  }
  const reset=async(value)=>{
    let datas={id:value.id}
    const {data}=await AsApi.reset_refund(datas)
    Message.success('操作成功')
    refresh()
  }
  const checkOK=async()=>{
    if(!checkData.value.fail_msg){
      Message.error('请输入拒绝原因')
      return
    }else{
      checkInfo.loading=true
      try{
        let dats={...checkData.value}
        const {data}=await AsApi.refuse_refund(dats)
        checkInfo.visible=false
        Message.success('操作成功')
        checkInfo.loading=false
        refresh()
      }catch{
        checkInfo.loading=false
      }
    }
  }
  const resetSearch=()=>{
    
  }
  onMounted(async () => {
    initPage()
    refresh()
    getParams()
  })
  </script>
  
  <style scoped>
  .icon {
    width: 1em;
  }
  .custom_cell {
  height: 100%;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
}
  </style>
  